<template>
  <a-select
    :value="selected"
    :disabled="disabled"
    placeholder="请选择图标"
    :style="{ minWidth: '120px', width: '100%', textAlign: 'left' }"
    allowClear
    @clear="onChange(null)"
  >
    <a-select-option v-for="(o, i) in iconList" :value="o" :key="i"
      ><component :is="antdIcons[o]" /> {{ o }}</a-select-option
    >
    <template #dropdownRender="{ menuNode: VNode, props }">
      <ul class="ul">
        <li
          v-for="(o, i) in iconList"
          :key="i"
          :class="['li', selected === o ? 'on' : ''].join(' ')"
          @click="onChange(o)"
        >
          <component :is="antdIcons[o]" />
        </li>
      </ul>
    </template>
  </a-select>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import _ from "lodash";

const { proxy } = getCurrentInstance();
const props = defineProps(["icon", "disabled"]);
const emit = defineEmits(["update:icon"]);

const selected = ref(props.icon);

const onChange = (v) => {
  selected.value = v;
  emit("update:icon", v);
};

const antdIcons = proxy.$antdIcons;
const iconList = [
  "HomeOutlined",
  "EnvironmentOutlined",
  "ProjectOutlined",
  "DatabaseOutlined",
  "CodeOutlined",
  "UserOutlined",
  "ApartmentOutlined",
  "ReadOutlined",
  "SolutionOutlined",
  "BarsOutlined",
  "EyeOutlined",
  "ToolOutlined",
  "PieChartOutlined",
  "AndroidOutlined",
  "WindowsOutlined",
  "ChromeOutlined",
  "DingdingOutlined",
  "AliwangwangOutlined",
  "AlertOutlined",
  "AimOutlined",
  "AccountBookOutlined",
  "ApiOutlined",
  "AppstoreAddOutlined",
  "BankOutlined",
  "BlockOutlined",
  "BookOutlined",
  "BranchesOutlined",
  "SketchOutlined",
  "SlackOutlined",
  "CarryOutOutlined",
  "CompassOutlined",
  "ClearOutlined",
  "CrownOutlined",
  "DeploymentUnitOutlined",
  "DesktopOutlined",
  "FolderAddOutlined",
  "FireOutlined",
  "FlagOutlined",
  "GiftOutlined",
  "GlobalOutlined",
  "GroupOutlined",
  "HeartOutlined",
  "RocketOutlined",
  "SendOutlined",
  "SettingOutlined",
  "StarOutlined",
  "ShareAltOutlined",
  "ToolOutlined",
  "ThunderboltOutlined",
  "TrophyOutlined",
  "ScheduleOutlined",
  "ReconciliationOutlined",
  "PaperClipOutlined",
  "HistoryOutlined",
  "CloudOutlined",
  "LineChartOutlined",
];
</script>

<style lang="less" scoped>
.ul {
  padding: 0;
  padding: 2px;

  .li {
    color: #000;
    width: 20px;
    padding: 2px;
    margin: 2px;
    float: left;
    border-width: 1px;
    border-radius: 2px;
    text-align: center;

    &:hover {
      background-color: skyblue;
    }
  }

  .on {
    background-color: coral;
  }
}

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>
